import { UserOutlined } from '@ant-design/icons';
import { Avatar, Card, message, Table } from 'antd';
import { useEffect, useState } from 'react';

import type { ColumnType } from 'antd/lib/table';
import type { FC } from 'react';

import TextOverflow from '@/components/Tooltip/TextOverflow';
import type { msgParams } from '@/services/msg';
import { getMsgDatas } from '@/services/msg';

const MsgNotification: FC = () => {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [tableData, setTableData] = useState<msgParams[]>([]);
  const columns: ColumnType<msgParams>[] = [
    {
      title: '创建人',
      dataIndex: 'createUserName',
      key: 'createUserName',
      fixed: 'left',
      width: 110,
      render: (text) => {
        return (
          <div>
            <Avatar size="small" icon={<UserOutlined />} />
            <span style={{ paddingLeft: 10, verticalAlign: 'middle' }}>{text}</span>
          </div>
        );
      },
    },
    {
      title: '内容',
      dataIndex: 'content',
      key: 'content',
      render: (text) => {
        return <TextOverflow>{text}</TextOverflow>;
      },
    },
    {
      title: '时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 120,
      fixed: 'right',
    },
  ];

  const getTableData = async () => {
    setIsLoading(true);
    try {
      await getMsgDatas({}).then((res) => {
        if (res && res.code === 200) {
          const dataReverseCopy = res.data;
          dataReverseCopy.reverse();
          setTableData(dataReverseCopy);
        } else {
          message.error(res.message);
        }
      });
    } catch (error) {
      message.error(String(error));
    } finally {
      setIsLoading(false);
    }
  };
  useEffect(() => {
    getTableData();
  }, []);
  return (
    <Card title="消息通知" headStyle={{ fontWeight: 'bold' }} style={{ width: '102%', height: 'calc( 100% - 52px )' }}>
      <Table
        style={{ overflow: 'hidden', height: 440, overflowY: 'scroll' }}
        columns={columns}
        size="middle"
        loading={isLoading}
        rowKey={(record: any) => record.id}
        dataSource={tableData}
        showHeader={false}
        pagination={false}
      />
    </Card>
  );
};
export default MsgNotification;
